 <!-- 病厉主内容区域 -->
<template>
  <div id="MedicalHistoryCon" class="mainContent">
    <div class="timeBox clearfix">
      <vue-datepicker-local class="pull-left" v-model="emptyTime" clearable />
      <div class="dropDown" v-if="historyList.length" v-clickoutside="handleClose">
        <p :class="{'up' : isShowHistory}" @click="showHistory">{{history}}</p>
        <ul :class="['list-link',{'show': isShowHistory}]">
          <li
            v-for="(item,index) in historyList"
            :key="index"
            @click="changeHistory($event)"
            :data-name="item.COURSE_TYPE"
          >{{item.COURSE_TYPE}}</li>
        </ul>
      </div>
    </div>
   
    <div class="historyTime" v-if="time.length">
      <ul class="cbp_tmtimeline" v-if="isTimeAxis">
        <li v-for="item1 in time">
          <div class="circle"></div>
          <span class="time">{{item1|filterDateAxis}}</span>
          <div class="cbp_tmlabel">
            <ul class="list-record clearfix">
              <li
                class="pull-left"
                v-for="list in listData[item1]"
                :data-id="list.UNIQUE_ID"
                @click="routerLink($event)"
              >
                <p>{{list.COURSE_REC_TIME|filterTime}}</p>
                <p>{{list.COURSE_TYPE}}</p>
              </li>
            </ul>
          </div>
          <div class="circle-bottom"></div>
        </li>
      </ul>
      <ul class="list-record clearfix" v-for="item1 in time" v-if="!isTimeAxis">
        <li
          class="pull-left"
          v-for="list in listData[item1]"
          :data-id="list.UNIQUE_ID"
          @click="routerLink($event)"
        >
          <p>{{list.COURSE_REC_TIME|filterTime}}</p>
          <p>{{list.COURSE_TYPE}}</p>
        </li>
      </ul>
    </div>

    <loading v-if="isShow && time.length== 0"></loading>
    <noSearch v-if="!isShow && time.length == 0"></noSearch>
  </div>
</template>
<script>
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import loading from "@/components/loading/loading";
import { apiCaseOfLllnessList, apiCaseOfLllnessType } from "@/api/api"; //引入病历列表数据
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
export default {
  components: {
    VueDatepickerLocal,
    loading,
    noSearch
  },
  data() {
    return {
      time: [],
      listData: [],
      patientID: this.$store.getters.ID,
      dataTime: "0000-00-00",
      isShow: true,
      isTimeAxis: true,
      caseOfLllnessID: "",
      emptyTime: "",
      isShowHistory: false,
      history: "全部",
      historyList: []
    };
  },
  watch: {
    dataTime: {
      handler(curVal, oldVal) {
        if (this.dataTime == "") {
          this.time = [];
          this.dataTime = "0000-00-00";
          this.isShow = true;
          this.isTimeAxis = true;
          this.getCaseOfLllnessList();
        } else if (this.dataTime == "0000-00-00") {
          this.time = [];
          this.isShow = true;
          this.isTimeAxis = true;
          this.getCaseOfLllnessList();
        } else {
          this.time = [];
          this.isShow = true;
          this.isTimeAxis = false;
          this.getCaseOfLllnessList();
        }
      }
    }
  },
  created() {
    sessionStorage.removeItem("scrollTop");
  },
  activated() {
    this.getCaseOfLllnessList();
    this.getCaseOfLllnessType();
    // 返回同一个位置
    var scrollTop = sessionStorage.getItem("scrollTop");
    if (scrollTop) {
      this.$nextTick(function() {
        $("#MedicalHistoryCon .historyTime").scrollTop(scrollTop);
      });
    }
  },
  mounted() {
    Bus.$on("timePicker", e => {
      this.dataTime = e.trim();
    });
  },
  methods: {
    getCaseOfLllnessList() {
      apiCaseOfLllnessList({
        patientID: this.patientID,
        dateTime: this.dataTime,
        type: this.history
      }).then(res => {
        this.time = [];
        if (JSON.parse(res).Status == -1) {
          this.isShow = false;
        }
        if (JSON.parse(res).Status == 1) {
          this.listData = JSON.parse(res).Data;
          for (var item in JSON.parse(res).Data) {
            //this.time.push(item);
            if (this.listData[item].length > 0) {
              this.time.push(item);
            }
          }
          this.isShow = true;
        }
      });
    },
    getCaseOfLllnessType() {
      apiCaseOfLllnessType({
        patientID: this.patientID
      }).then(res => {
        if (JSON.parse(res).Status == 1) {
          let Json = { COURSE_TYPE: "全部" };
          let jsonarray = JSON.parse(res).Data;
          let JsonApproach = jsonarray.unshift(Json);
          this.historyList = jsonarray;
          //console.log(this.historyList)
        }
      });
    },
    routerLink(e) {
      this.caseOfLllnessID = e.currentTarget.getAttribute("data-id");
      sessionStorage.setItem(
        "scrollTop",
        $("#MedicalHistoryCon .historyTime").scrollTop()
      );
      //console.log(this.caseOfLllnessID)
      this.$router.push({
        name: "medicalHistoryDetails",
        params: { caseOfLllnessID: this.caseOfLllnessID },
        query: { item: 3 }
      });
    },
    handleClose() {
      this.isShowHistory = false;
    },
    showHistory() {
      this.isShowHistory = !this.isShowHistory;
    },
    changeHistory(event) {
      this.time = [];
      this.history = $.trim(event.currentTarget.innerHTML);
      this.isShowHistory = false;
      this.getCaseOfLllnessList();
    }
  }
};
</script>
<style scoped>
.timeBox {
  padding-top: 20px;
  padding-left: 46px;
}
.dropDown {
  float: left;
  width: 175px;
  height: 36px;
  line-height: 36px;
  background: #fff;
  padding-left: 10px;
  border: 1px solid #e5e5e5;
  margin-left: 50px;
}

.dropDown p {
  color: #999;
  position: relative;
}

.dropDown p:after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-image: url("../../../../static/images/unfold_arron.png");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: 15px;
  float: right;
}

.dropDown p.up:after {
  background-image: url("../../../../static/images/up_arron.png");
}

.list-link {
  position: relative;
  z-index: 9999;
  display: none;
  border: 1px solid #eee;
  left: -10px;
  width: 280px;
  background-color: #fff;
  box-shadow: 2px 5px 5px #ccc;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.list-link li {
  text-align: center;
  cursor: pointer;
}

.list-link li:hover {
  background-color: #f6f6f6;
}
.historyTime {
  padding: 0 20px 20px 50px;
  margin-top: 20px;
  list-style: none;
  position: relative;
  height: calc(100vh - 200px);
  overflow: auto;
}
.cbp_tmtimeline {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 1px;
  background: #ccc;
}

.cbp_tmtimeline > li {
  position: relative;
  padding-left: 20px;
}

.cbp_tmtimeline .circle {
  width: 8px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  color: #fff;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #84c3e3;
  text-align: center;
  left: -3px;
  top: 6px;
}

.cbp_tmtimeline .circle-bottom {
  width: 8px;
  height: 8px;
  line-height: 8px;
  position: absolute;
  color: #fff;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #84c3e3;
  text-align: center;
  left: -3px;
  bottom: -14px;
}

.cbp_tmlabel {
  padding-bottom: 25px;
}

.list-record li {
  width: 210px;
  padding: 20px 0;
  box-shadow: 0 0 10px #ccc;
  text-align: center;
  min-height: 90px;
  border-radius: 8px;
  margin-top: 25px;
  margin-left: 15px;
}

.list-record li p {
  line-height: 25px;
}
@media screen and (max-width: 768px) {
  .dropDown {
    width: 210px;
    padding-left: 10px;
  }
 
  .historyTime {
  padding: 15px 20px 20px 50px;
  border-top: 1px solid #ccc;
}
}
@media screen and (max-width: 624px) {
  .dropDown {
    margin-top: 10px;
    margin-left: 0;
  }
}
</style>
